<template>

  <div class="draggable-menu"
       :style="{height:open?height+'rem':'1.33333rem',
       borderRadius:open?'15px':'10px'}"
       ref="moveDivMenu"
       @touchstart="down"
       @touchmove.prevent="move"
       @touchend="end"
  >
    <div ref="menu"
         :class="open?'menu-open':''"
         :style="{backgroundColor:open?colour:''}"
         class="draggable-menu-top"
         @click="openMenu">{{ activeCup.cupName }}

    </div>

    <div class="menu-items" :class="open?'menu-items--visible':'menu-items--hidden'">
      <div v-for="(cup,index) in user.cups"
           :key="cup.id+'menu-item'"
           @click="changeCup2(index)"
           class="menu-item"
           :class="cup.id===activeCup.id?'active-item':'passive-item'"
      >
        <span class="cup-name" :class="cup.id===activeCup.id?'active-cup':''"
              :style="{backgroundColor:cup.id===activeCup.id?colour:''}">{{ cup.cupName }}</span>
      </div>
    </div>

  </div>
</template>

<script>
import {mapMutations, mapState} from 'vuex'

export default {
  name: "DraggableMenu",
  data() {
    return {
      open: false,
      /*  drag  */
      flags: false,
      position: {x: 0, y: 0},
      nx: '', ny: '', dx: '', dy: '', xPum: '', yPum: '',
      moveDivMenu: null,
      wMax: null,
      // hMax: null
    }
  },
  methods: {
    ...mapMutations(['changeCup']),
    openMenu() {
      this.open = !this.open;
    },
    changeCup2(index) {
      this.changeCup(this.user.cups[index]);
    },
    down(event) {
      this.flags = true;
      this.position.x = event.touches[0].clientX;
      this.position.y = event.touches[0].clientY;
      this.dx = this.moveDivMenu.offsetLeft;
      this.dy = this.moveDivMenu.offsetTop;
    },
    move(event) {
      if (this.flags) {
        this.nx = event.touches[0].clientX - this.position.x;
        this.ny = event.touches[0].clientY - this.position.y;
        this.xPum = this.dx + this.nx;
        this.yPum = this.dy + this.ny;

        if (this.xPum < 0) this.xPum = 0;
        else if (this.xPum > this.wMax) this.xPum = this.wMax;
        if (this.yPum < 0) this.yPum = 0;
        else if (this.yPum > this.hMax) this.yPum = this.hMax;
        this.moveDivMenu.style.left = this.xPum + "px";
        this.moveDivMenu.style.top = this.yPum + "px";
        //阻止页面的滑动默认事件；如果碰到滑动问题，1.2 请注意是否获取到 touchmove
        document.addEventListener("touchmove", function () {
          event.preventDefault();
        }, false);
      }
    },
    end() {
      this.flags = false;
    },
  },
  computed: {
    ...mapState(['user', 'activeCup']),
    colour() {
      if (this.activeCup.settings.waterColour) {
        let c = this.activeCup.settings.waterColour;
        let i = c.indexOf('.');
        return c.substring(0, i) + '.7)';
      } else {
        return ' rgba(40, 160, 220, 0.7)';
      }
    },
    height() {

      let h = this.user.cups.length * 1.33333 + 1.33333;
      if (h >= 8) return 8;
      else return h;
    },
    hMax() {
      return document.documentElement.clientHeight - (this.open ? this.height : 50);
    }
  },
  mounted() {
    this.moveDivMenu = this.$refs.moveDivMenu;
    this.wMax = document.documentElement.clientWidth - this.moveDivMenu.offsetWidth;
  },
}
</script>

<style lang="less">
.draggable-menu {
  font-family: ZCOOL, serif;
  z-index: 9998;
  position: absolute;
  right: 0;
  top: 0;
  width: 1.86667rem;
  height: 1.33333rem;
  line-height: 1.33333rem;
  vertical-align: middle;
  font-size: 0.4rem;
  text-align: center;

  overflow: hidden;

  background-color: #fff;
  box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.1);
  opacity: 0.9;

  transition: height .5s linear;

  .menu-items {
    .menu-item {
      padding: 0.0266666rem 0.08rem;
      overflow: hidden;
      width: 1.86667rem;
      height: 1.33333rem;
      line-height: 0.64rem;
      border-top: rgba(0, 0, 0, 0.8) 1px dashed;

      .cup-name {
        overflow: hidden;
      }
    }
  }

}


.menu-items--hidden {
  background-color: rgba(255, 255, 255, 0.8);
  z-index: -100;
}

.menu-items--visible {
  background-color: rgba(255, 255, 255, 0.8);
  z-index: 100;
}

.draggable-menu-top {
  padding: 1px 3px;
  overflow: hidden;
  width: 1.86667rem;
  height: 1.33333rem;
  line-height: 0.64rem;
  transition: all .5s linear;
}

.menu-open {
  transition: all .5s linear;
}

.active-cup {
  background-color: rgb(169, 195, 162);
}


</style>